<!-- 登录 -->
<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		toast,
		guid
	} from '@/uni_modules/uview-plus'
	import {
		getPhoneApi,
		loginAPi
	} from '@/api/my/index.js'
	// 数据
	const data = reactive({
		loginCode: ''
	})
	// 页面显示
	onShow(() => {
		uni.login({
			provider: 'weixin', //使用微信登录
			onlyAuthorize: true,
			success: function(loginRes) {
				console.log(loginRes.code, 'loginRes.code');
				data.loginCode = loginRes.code
			}
		});
	})
	// 选中协议
	const checked = ref(false)

	// 校验是否勾选协议
	function isCheckedAg() {
		if (!checked.value) {
			toast('请先同意协议!')
		}
		return
	}
	// 登录
	function login(e) {
		console.log('获取的登录信息：', e)
		if (!e.detail.code) {
			toast('您已取消授权登录!')
		} else {
			// 获取手机号
			getPhoneApi({
				openIdCode: e.detail.code,
			}).then(res => {
				console.log('res', res)
				loginAPi({
						openIdCode: data.loginCode,
						phone: res.data
						// encryptedData: '',
						// phoneCode: e.detail.code,
						// loginCode: data.loginCode,
						// state: guid(),
					})
					.then(info => {
						console.log('res', res)
						const {
							access_token,
							user_id
						} = info.data
						// 保存登录数据
						uni.setStorageSync('openId', e.detail.code);
						uni.setStorageSync('accessToken', access_token);
						uni.setStorageSync('userId', user_id);
						// 暂时不存储openid
						// uni.setStorageSync('openid', openid);
						// 返回上一个页面
						uni.switchTab({
							url: '/pages/home/my'
						})
						// uni.navigateBack()
					})
			})
		}
	}
	// 前往协议详情页面
	const goDetail = (id) => {
		uni.navigateTo({
			url: `/pages/home/agreement?id=` + id
		})
	}
</script>

<template>
	<view class="login-page">
		<view class="bg-box">
			<image style="width: 100vw; height: 100vh;" mode="widthFix" src="/static/images/login/bg.png"></image>
		</view>
		<!-- 内容 -->
		<view class="content-box">
			<view class="logo-box">
				<image style="width: 360rpx; height: 360rpx;" mode="widthFix" src="/static/images/login/logo.png">
				</image>
			</view>
			<button v-if="checked" class="up-reset-button btn" openType="getPhoneNumber" @getphonenumber="login">
				<view class="text-box">
					<!-- <img src="/static/images/login/weixin.png" style="width: 52rpx; height: 52rpx;" mode="widthFix"> -->
					<text>手机号快速登录</text>
				</view>
			</button>
			<button v-else class="up-reset-button btn" @click="isCheckedAg">
				<view class="text-box">
					<!-- <img src="/static/images/login/weixin.png" style="width: 52rpx; height: 52rpx;" mode="widthFix"> -->
					<text>手机号快速登录</text>
				</view>
			</button>
			<view class="agreement-box">
				<u-checkbox v-model:checked="checked" usedAlone activeColor="#25D62E" shape="circle" label="" />
				<text>我已阅读并同意</text>
				<text class="ag" @click="goDetail(1)">《隐私协议》</text>
				<text class="ag">、</text>
				<text class="ag" @click="goDetail(2)">《用户协议》</text>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.login-page {
		text-align: center;

		// 全局背景
		& .bg-box {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 1;

		}

		// 内容区域
		& .content-box {
			position: relative;
			bottom: 0;
			left: 0;
			z-index: 2;
			padding-top: 318rpx;

			// logo
			& .logo-box {}

			// 按钮
			& .btn {
				margin-top: 424rpx;
				width: 564rpx;
				height: 112rpx;
				line-height: 112rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				background: linear-gradient(180deg, #64DB06 0%, #169560 100%);
				border-radius: 98rpx;
				box-shadow: 0px 13px 26.9px rgba(72, 162, 13, 0.30);

				& .text-box {
					display: flex;
					align-items: center;
					justify-content: center;

					& text {
						margin-left: 16rpx;
					}
				}
			}

			// 协议
			& .agreement-box {
				margin-top: 68rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 400;
				font-size: 24rpx;
				color: #929397;

				&::v-deep .u-checkbox .u-checkbox__icon-wrap {
					width: 36rpx !important;
					height: 36rpx !important;

					& .u-icon__icon {
						font-size: 36rpx;
						line-height: 36rpx;
					}
				}

				& .ag {
					color: #008043;
				}
			}
		}
	}
</style>